<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>3D移动translate3d</title>
        <style>
            body {
                /* 透视写到被观察元素的父盒子上面 */
                perspective: 200px;
            }

            div {
                width: 200px;
                height: 200px;
                background-color: pink;
                /* transform: translateX(100px);
                   transform: translateY(100px); */
                /* transform: translateX(100px) translateY(100px) translateZ(100px); */
                /* 1. translateZ 沿着Z轴移动 */
                /* 2. translateZ 后面的单位一般跟px */
                /* 3. translateZ(100px) 向外移动100px （向正面来移动的） */
                
                /* 4. 3D移动简写的方式 */
                /* transform: translate3d(x,y,z); */
                /* transform: translate3d(100px, 100px, 100px); */
                
                /* 5. xyz是不能省略的，如果没有就写0 */
                transform: translate3d(400px, 100px, 100px);
            }
        </style>
    </head>

    <body>
        <div></div>
    </body>
</html>
